 
<template>
  <!-- 产品列表 -->
  <div class="sec1">
    <el-form :model="form" :inline="true" class="top-body" size="small" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.title" style="width:180px" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="实际销量">
        <el-input
          v-model="form.sellMin"
          type="number"
          :min="0"
          style="width:90px"
          placeholder="请输入"
        ></el-input>
        <span style="margin:0 5px">-</span>
        <el-input
          v-model="form.sellMax"
          type="number"
          :min="0"
          style="width:90px"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="产品类型">
        <el-select v-model="form.goodsType" style="width:150px" placeholder="产品类型">
          <el-option label="全部" value></el-option>
          <el-option label="实物商品" value="1"></el-option>
          <el-option label="服务项目" value="2"></el-option>
          <el-option label="工程项目" value="3"></el-option>
          <el-option label="虚拟商品" value="4"></el-option>
        </el-select>
      </el-form-item>

      <br v-if="showTop" />
      <el-form-item label="一级分类" v-if="showTop">
        <el-select v-model="form.status" style="width:180px" placeholder="一级分类">
          <el-option label="全部" value></el-option>
          <el-option label="合伙人商品" value="1"></el-option>
          <el-option label="非合伙人商品" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一口价" v-if="showTop">
        <el-input v-model="form.minPrice" type="number" style="width:90px" placeholder="请输入"></el-input>
        <span style="margin:0 5px">-</span>
        <el-input v-model="form.maxPrice" type="number" style="width:90px" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="form.pageIndex=1;getDataList()" type="primary">查询</el-button>
        <el-button v-if="showTop" @click="resetForm()">重置</el-button>
        <el-button @click="addOrUpdateHandle('')" type="primary">新增商品</el-button>
      </el-form-item>
      <div @click="showTop=!showTop" class="top-close">
        {{showTop?"收起":"更多"}}
        <i v-if="showTop" class="el-icon-arrow-up"></i>
        <i v-if="!showTop" class="el-icon-arrow-down"></i>
      </div>
    </el-form>
    <div style="margin-top:10px;width:100px;display:flex">
      <el-button
        type="danger"
        size="mini"
        @click="deleteHandle()"
        :disabled="dataListSelections.length <= 0"
      >批量删除</el-button>
      <el-button size="mini" :disabled="dataListSelections.length <= 0" @click="changeMStatus(1)">上架</el-button>
      <el-button size="mini" :disabled="dataListSelections.length <= 0" @click="changeMStatus(2)">下架</el-button>
    </div>

    <div class="components-edit">
      <div class="components-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;padding: 8px 0 ! important;"
          :header-cell-style="{background:'#F7F7F7',color:'#1E1E1E'}"
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品" show-overflow-tooltip width="220">
            <template slot-scope="scope">
              <img :src="scope.row.thumb" class="goodsImg" />
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sell" width="100" sortable label="实际销量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="stock" sortable label="总库存" show-overflow-tooltip></el-table-column>
          <el-table-column prop="price" label="一口价" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" show-overflow-tooltip>
            <template slot-scope="{row}">
              <div>{{row.create_time}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="use_num" label="上架" show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-switch
                :active-value="1"
                :inactive-value="2"
                v-model="row.status"
                @change="val=>changeStatus(row.id,val)"
              />
              <span class="shopStatus">{{row.status=='1'?'已上架':'未上架'}}</span>
            </template>
          </el-table-column>

          <el-table-column align="ceneter" label="操作">
            <template slot-scope="{row}">
              <el-button type="text" size="mini" @click="addOrUpdateHandle(row.id)">编辑</el-button>
              <el-button type="text" size="mini" @click="deleteHandle(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="padding:20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  get_goods_list,
  edit_goods_status,
  del_goods_info
} from "@/utils/api/market";
export default {
  props: {},
  data() {
    return {
      showTop: false,
      tableData: [],

      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      form: {}
    };
  },
  created() {
    this.resetForm();
    this.getDataList();
  },
  methods: {
    resetForm() {
      this.form = {
        pageIndex: 1,
        pageSize: 10,
        goodsType: "",
        categoryid: "",
        is_partner: "",
        title: "",
        sellMax: "",
        sellMin: "",
        minPrice: "",
        maxPrice: "",
        status: "",
        saleMax: "",
        saleMin: "",
        name: "",
        region: "",
        small_num: "",
        big_num: ""
      };
    },
    /**获取列表数据 */
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.newApi("/home/market/goods/get_goods_list"),
        method: "post",
        data: this.$http.adornData(this.form)
      })
        .then(data => {
          this.dataListLoading = false;
          if (data.code == 200) {
            this.tableData = data.data.list;
            this.totalPage = data.data.total;
          } else {
            this.tableData = [];
            this.totalPage = 0;
          }
        })
        .catch(() => {
          this.dataListLoading = false;
          this.$message.error("服务器错误，请联系管理员");
        });
    },
    /**新增 / 修改 */
    addOrUpdateHandle(id) {
      this.$emit("editShop", id);
    },
    /**删除 */
    deleteHandle(data) {
      var ids =
        data && data.id
          ? [data.id]
          : this.dataListSelections.map(item => {
              return item.id;
            });
      var nameS =
        data && data.title
          ? [data.title]
          : this.dataListSelections.map(item => {
              return item.title;
            });
      this.$confirm(
        `确定对 [ ${nameS.join(",")} ] 进行 [ ${
          data && data.id ? "删除" : "批量删除"
        } ] 操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.newApi("/home/market/goods/del_goods_info"),
            method: "post",
            data: this.$http.adornData({ id: ids })
          }).then(data => {
            if (data && data.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    changeMStatus(status) {
      var ids = this.dataListSelections.map(item => {
        return item.id;
      });
      this.changeStatus(ids.join(","), status);
    },
    /**商品上下架 */
    changeStatus(id, status) {
      this.$http({
        url: this.$http.newApi("/home/market/goods/edit_goods_status"),
        method: "post",
        data: this.$http.adornData({ id: id, status: status })
      }).then(res => {
        if (res.code == 200) {
          this.getDataList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 每页数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.form.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.pageIndex = val;
      this.getDataList();
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.goodsImg {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.top-close {
  display: flex;
  align-items: center;
  float: right;
  cursor: pointer;
  padding-right: 10px;
  padding-top: 20px;
  font-size: 14px;
  i {
    margin-left: 8px;
  }
}
.shopStatus {
  color: rgba(9, 109, 217, 1);
  font-size: 12px;
  margin-left: 10px;
}
.top-body {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 5px;
}
.sec1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.components-edit {
  margin-top: 10px;

  .components-table {
    border: 1px solid #e6e6e6;
  }
  .block {
    padding: 10px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .page-all {
      font-size: 12px;
      color: #666666;
      letter-spacing: 2px;
    }
  }
}
</style>